<template>
    <el-dialog width="26vw" class="flex-dialog" v-model="info.visible" @close="handleClose"  >
        <template #header>
            <div style="font-size:var(--18FontSize); font-weight:500; color:#525866;">{{ info.forEdit ? '编辑分组' : '新增分组' }}</div>
        </template>
        <el-form ref="myForm" class="flex-form" :model="form" :rules="rules" label-position="top">
            <el-form-item label="分组名称" prop="groupName">
                <FlexInput :data="{ paramKey:'groupName' }" :form="form" />
            </el-form-item>
            <el-form-item label="负责人" prop="userId">
                <FlexSelect :payload="userList" :data="selectOpt" :form="form" />
            </el-form-item>
          
        </el-form>
        <template #footer>
            <div style="display:flex; gap:var(--mPadding); ">
                <div class="flex-btn middle opacity" style="flex:1;" @click="handleClose">取消</div>
                <div class="flex-btn middle" style="flex:1;" @click="handleSubmit">确认</div>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
    import { watch, ref, reactive, nextTick, onUnmounted } from 'vue';
    import { useGlobalStore } from '@/stores/global';
    import { addOrUpdateGroup } from '@/api/group.js';
    import { ElMessage } from 'element-plus';
    import FlexInput from '@/components/FlexInput.vue';
    import FlexSelect from '@/components/FlexSelect.vue';
    import FlexInputNum from '@/components/FlexInputNum.vue';
    const global = useGlobalStore();
    const props = defineProps({
        info:{ type:Object },
        userList:{ type:Array }
    });
    const selectOpt = { paramKey:'userId', fullWidth:true, labelName:'userName', labelKey:'userId' };
    const emit = defineEmits(['update:info', 'refresh']);
    const machList = ref([]);
    const myForm = ref(null);
    const form = reactive({
        groupName:'',
        userId:''
    });
    const rules = reactive({
        groupName:[{ required:true, message:'分组名称不能为空',  trigger:'blur' }],
        userId:[{ required:true, message:'请选择负责人',  trigger:'blur' }],
    });
    // 重置状态
    function handleClose(){
        Object.keys(form).forEach(key=>{
            form[key] = '';
        })
        myForm.value.clearValidate();
        props.info.visible = false;
    }
    function handleSubmit(){
        myForm.value.validate(valid=>{
            if ( valid ){
                let obj = { ...form };
                if ( props.info.forEdit ){
                    obj.groupId = props.info.row.groupId;
                }
                addOrUpdateGroup(obj, props.info.forEdit)
                .then(res=>{
                    if ( res.data.code === 200 ) {
                        ElMessage({
                            type:'success',
                            message:`${props.info.forEdit ? '更新' : '新增'}分组成功`
                        })
                        handleClose();
                        emit('refresh');                      
                    }
                })
            }
        })
    }
    watch(()=>props.info, ()=>{
        if ( props.info.forEdit ){
            form.groupName = props.info.row.groupName;
            form.userId = String(props.info.row.userId);
        }
    })
   
</script>
